<template>
    <div class="center-box">
        <!--  商品列表 -->
        <div class="center-middle">
            <div class="shang-top">
                <div class="shang-top-one"><span></span> &nbsp&nbsp商品列表</div>
                <div class="shang-top-two">
                    <el-button class="edit_btn" @click="shua"><i class="el-icon-refresh">&nbsp&nbsp刷新</i></el-button>
                </div>
            </div>
            <!-- 商品的高级检索 -->
            <div class="shang-middle">
                <div class="shang-middle-left"><i class="el-icon-search"></i>&nbsp&nbsp筛选查询</div>
                <div class="shang-middle-right">
                    <template>
                        <div>
                            <el-button class="edit_btn" @click="dialogSelectQuery">高级检索</el-button>
                            <el-dialog
                                    width="50%"
                                    title="高级检索"
                                    :visible.sync="dialogFormVisible"
                                    class="upload-dialog"
                                    append-to-body>
                                <el-row >
                                    <el-form :label-position="labelPosition" label-width="80px" :model="dialogQuery">
                                        <el-col :span="10">
                                            <el-form-item label="商品分类：" :label-width="formLabelWidth">
                                                <el-select @keyup.enter.native="queryData" v-model="dialogQuery.categroyId" placeholder="请选择商品分类" style="width:100%">
                                                    <el-option label="书籍" :value="1"></el-option>
                                                    <el-option label="服装" :value="2"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10" :offset="3">
                                            <el-form-item label="商品名称：":label-width="formLabelWidth">
                                                <el-input @keyup.enter.native="queryData" v-model="dialogQuery.productName" placeholder="请选择商品名称"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-form-item label="商品状态：" :label-width="formLabelWidth">
                                                <el-select @keyup.enter.native="queryData" v-model="dialogQuery.productSate" placeholder="请选择商品状态" style="width:100%">
                                                    <el-option label="已上架" :value="1"></el-option>
                                                    <el-option label="已下架" :value="2"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10" :offset="3">
                                            <el-form-item label="商品价格：" :label-width="formLabelWidth">
                                                <el-input @keyup.enter.native="queryData" v-model="dialogQuery.currentpriceProduct" placeholder="请选择商品价格"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10">
                                            <el-form-item label="审核状态：" :label-width="formLabelWidth">
                                                <el-select @keyup.enter.native="queryData" v-model="dialogQuery.productCstatus" placeholder="请选择商品状态" style="width:100%">
                                                    <el-option label="未审核" :value="3"></el-option>
                                                    <el-option label="审核中" :value="4"></el-option>
                                                    <el-option label="审核失败" :value="5"></el-option>
                                                    <el-option label="其他" :value="6"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10" :offset="3">
                                            <el-form-item label="商品标签：" :label-width="formLabelWidth">
                                                <el-input @keyup.enter.native="queryData" v-model="dialogQuery.productDescription" placeholder="请选择商品标签"></el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-form>
                                </el-row>
                                <div slot="footer" class="dialog-footer">
                                    <el-button type="success" @click="dialogFormVisible = false" class="footer_qx">取消</el-button>
                                    <el-button type="success" v-show="btn_show" @click="handleQuery" class="footer_qd">开始检索</el-button>
                                </div>
                            </el-dialog>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <!--商品的模糊查询-->
        <div class="center-dim">
            <el-form :inline="true" :model="dialogQuery">
                <el-form-item label="商品名称：">
                    <el-input @keyup.enter.native="likeData" type="text" v-model="dialogQuery.productName" placeholder="请选择商品名称"></el-input>
                </el-form-item>
                <el-form-item label="商品分类：">
                    <el-select @keyup.enter.native="likeData" v-model="dialogQuery.categroyId" placeholder="请选择商品分类">
                        <el-option label="书籍" :value="1"></el-option>
                        <el-option label="服装" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品状态：">
                    <el-select @keyup.enter.native="likeData" v-model="dialogQuery.productSate" placeholder="请选择商品状态">
                        <el-option label="已上架" :value="1"></el-option>
                        <el-option label="已下架" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品标签：">
                    <el-input @keyup.enter.native="likeData" type="text" v-model="dialogQuery.productDescription" placeholder="请选择商品标签"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 树形组件的头工具栏 -->
        <div class="center-tree-one">
            <div>商品分类
                <el-tree
                        :data="treeData"
                        :props="defaultProps"
                        default-expand-all
                        style="background: #F2F2F2;height: 320px;margin-top: 2px;"
                        @node-click="handleNodeClick"></el-tree>
            </div>
        </div>
        <!--表格头部工具栏-->
        <div class="center-table">
            <div class="center-table-one">
                <span><i class="el-icon-s-unfold"></i>数据列表</span>
                <div>
                    <el-button class="edit_btn" @click="$router.push('/AddCommodity')">添加商品</el-button>
                </div>
            </div>
            <!--  实现表格 -->
            <div class="center-table-two">
                <el-table
                        :data="tableData.slice((currentPage - 1) * pagesize,currentPage * pagesize)"
                        border
                        type="selection"
                        style="width: 1200px"
                        :header-cell-style="{background:'#F9FAFC'}"
                        @selection-change="handleSelectionChange">
                    <!-- 复选框 -->
                    <el-table-column
                            type="selection"
                            align="center">
                    </el-table-column>
                    <!-- 商品编号 -->
                    <el-table-column
                            fixed
                            prop="productCode"
                            align="center"
                            label="编号"
                            width="100">
                    </el-table-column>
                    <!-- 商品图片 -->
                    <el-table-column
                            align="center"
                            label="商品图片"
                            width="100">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.mainImage" style="width: 70%;height: 40%;"/>
                        </template>
                    </el-table-column>
                    <!-- 商品名称 -->
                    <el-table-column
                            prop="productName"
                            align="center"
                            label="商品名称"
                            width="130">
                    </el-table-column>
                    <!-- 商品价格 -->
                    <el-table-column
                            prop="currentpriceProduct"
                            align="center"
                            label="价格"
                            width="110">
                    </el-table-column>
                    <!-- 上架下架 -->
                    <el-table-column
                            prop="productSate"
                            align="center"
                            label="上架/下架"
                            width="120">
                        <!--上架下架的开关-->
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.productSate"
                                    :active-value = 1
                                    :inactive-value = 2
                                    active-color="#1890ff"
                                    inactive-color="#c0c0c0"
                                    @change="changeStatus(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <!-- 商品分类 -->
                    <el-table-column
                            prop="categroyId"
                            align="center"
                            :formatter="fenlei"
                            label="分类"
                            width="120">
                    </el-table-column>
                    <!-- 商品标签 -->
                    <el-table-column
                            prop="productDescription"
                            align="center"
                            label="标签"
                            width="120">
                    </el-table-column>
                    <!-- 商品销量 -->
                    <el-table-column
                            prop="hits"
                            align="center"
                            label="销量"
                            width="120">
                    </el-table-column>
                    <!-- 审核状态 -->
                    <el-table-column
                            prop="productCstatus"
                            align="center"
                            :formatter="shenhe"
                            label="审核状态"
                            width="120">
                        <template slot-scope="scope">
                            <!-- 使用管道符使他在一个框里 -->
                            {{scope.row.productCstatus | shenhe}}
                            <el-button type="text" class="btn" @click="audit(scope.row)">审核详情</el-button>
                            <!-- 审核详情------- 表格 -->
                            <el-dialog
                                    width="50%"
                                    top="30vh"
                                    title="商品审核详情"
                                    class="upload-dialog"
                                    append-to-body
                                    :modal-append-to-body="false"
                                    :visible.sync="dialogTableVisible">
                                <el-table :data="gridData" border :header-cell-style="{background:'#F9FAFC'}">
                                    <el-table-column property="id" label="审核ID" width="140" align="center"></el-table-column>
                                    <el-table-column property="applyDate" label="审核时间" width="192" align="center"></el-table-column>
                                    <el-table-column property="launchId" label="审核人员" align="center" width="160"></el-table-column>
                                    <el-table-column property="result" label="审核结果" :formatter="shen" align="center" width="160"></el-table-column>
                                    <el-table-column property="remarks" label="反馈详情" align="center" width="160"></el-table-column>
                                </el-table>
                            </el-dialog>
                        </template>
                    </el-table-column>
                    <!-- 操作 -->
                    <el-table-column
                            fixed="right"
                            align="center"
                            label="操作"
                            width="110">
                        <template slot-scope="scope">
                            <el-button type="text" @click="dialogSelect(scope.row)" class="btn">查看</el-button>
                            <el-button type="text" @click="handleEdit(scope.$index, scope.row)" class="btn">编辑</el-button>
                            <el-button type="text" @click="handleDelete(scope.$index,scope.row)" class="btn">删除</el-button>
                            <el-button type="text" @click="$router.push('/ProductLog')" class="btn">日志</el-button>
                            <!-- 表格弹窗------ 查看 -->
                            <el-dialog
                                    width="50%"
                                    title="商品详情"
                                    :visible.sync="dialogFormVisible01"
                                    class="upload-dialog"
                                    append-to-body
                                    :modal-append-to-body="false">
                                <el-row>
                                    <el-form :label-position="labelPosition01" label-width="80px" :model="dialogQuery">
                                        <el-col :span="9">
                                            <el-form-item label="商品编号：" :label-width="formLabelWidth">
                                                <el-input v-model="dialogQuery.productCode" readonly/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9" :offset="5">
                                            <el-form-item label="商品名称：":label-width="formLabelWidth">
                                                <el-input v-model="dialogQuery.productName" readonly/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9">
                                            <el-form-item label="商品价格：" :label-width="formLabelWidth">
                                                <el-input v-model="dialogQuery.currentpriceProduct" readonly/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9" :offset="5">
                                            <el-form-item label="商品状态：" :label-width="formLabelWidth">
                                                <el-select v-model="dialogQuery.productSate" placeholder="请选择课程分类" readonly>
                                                    <el-option label="已上架" :value="1"></el-option>
                                                    <el-option label="已下架" :value="2"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9">
                                            <el-form-item label="商品分类：" :label-width="formLabelWidth">
                                                <el-select v-model="dialogQuery.categroyId" placeholder="请选择课程分类" readonly>
                                                    <el-option label="书籍" :value="1"></el-option>
                                                    <el-option label="服装" :value="2"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9" :offset="5">
                                            <el-form-item label="商品销量：" :label-width="formLabelWidth">
                                                <el-input v-model="dialogQuery.hits" readonly/>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="23">
                                            <el-form-item label="商品标签：":label-width="formLabelWidth">
                                                <el-input
                                                        type="textarea"
                                                        :autosize="{ minRows: 2, maxRows: 4}"
                                                        readonly
                                                        v-model="dialogQuery.productDescription">
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="23">
                                            <el-form-item label="商品介绍：":label-width="formLabelWidth">
                                                <el-input
                                                        type="textarea"
                                                        :autosize="{ minRows: 4, maxRows: 4}"
                                                        readonly
                                                        v-model="dialogQuery.searchKeywords">
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-form>
                                </el-row>
                            </el-dialog>

                            <!-- 表格弹窗------ 编辑 -->
                            <el-dialog
                                    width="50%"
                                    class="upload-dialog"
                                    title="修改商品信息"
                                    :visible.sync="dialogFormVisible02"
                                    append-to-body
                                    :modal-append-to-body="false">
                                <el-row>
                                    <el-form :label-position="labelPosition01" label-width="80px" :model="dialogQuery">
                                        <el-col :span="9">
                                            <el-form-item label="商品编号：" :label-width="formLabelWidth">
                                                <el-input v-model="dialogQuery.productCode" placeholder="请输入商品编号"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9" :offset="5">
                                            <el-form-item label="商品名称：":label-width="formLabelWidth">
                                                <el-input v-model="dialogQuery.productName" placeholder="请输入商品名称"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9">
                                            <el-form-item label="商品价格：" :label-width="formLabelWidth">
                                                <el-input v-model="dialogQuery.currentpriceProduct" placeholder="请输入商品价格"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9" :offset="5">
                                            <el-form-item label="商品状态：" :label-width="formLabelWidth">
                                                <el-select v-model="dialogQuery.productSate" placeholder="请输入商品状态" style="width:100%">
                                                    <el-option label="已上架" :value="1"></el-option>
                                                    <el-option label="已下架" :value="2"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9">
                                            <el-form-item label="商品分类：" :label-width="formLabelWidth">
                                                <el-select v-model="dialogQuery.categroyId" placeholder="请输入商品分类" style="width:100%">
                                                    <el-option label="书籍" :value="1"></el-option>
                                                    <el-option label="服装" :value="2"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="9" :offset="5">
                                            <el-form-item label="商品销量：" :label-width="formLabelWidth">
                                                <el-input v-model="dialogQuery.hits" placeholder="请输入商品销量"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="23">
                                            <el-form-item label="商品标签：":label-width="formLabelWidth">
                                                <el-input
                                                        v-model="dialogQuery.productDescription"
                                                        type="textarea"
                                                        :autosize="{ minRows: 2, maxRows: 4}"
                                                        placeholder="请输入商品标签">
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="23">
                                            <el-form-item label="商品介绍：":label-width="formLabelWidth">
                                                <el-input
                                                        placeholder="请输入商品介绍"
                                                        type="textarea"
                                                        :autosize="{ minRows: 4, maxRows: 4}"
                                                        v-model="dialogQuery.searchKeywords">
                                                </el-input>
                                            </el-form-item>
                                        </el-col>
                                    </el-form>
                                </el-row>
                                <div slot="footer" class="dialog-footer">
                                    <el-button  @click="dialogFormVisible02 = false" class="footer_qx">取 消</el-button>
                                    <el-button type="primary" v-show="btn_show01" @click="handleUpdate" class="footer_qd">确 定</el-button>
                                </div>
                            </el-dialog>

                            <!-- 表格弹窗------ 删除 -->
                            <el-dialog
                                    append-to-body
                                    :modal-append-to-body="false"
                                    class="upload-dialog"
                                    title="提示"
                                    :visible.sync="dialogFormVisible03">
                                <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
                                <span slot="footer">
                                    <el-button  @click="dialogFormVisible03 = false" class="footer_qx">取 消</el-button>
                                    <el-button type="primary" @click="deleteRow" class="footer_qd">确 定</el-button>
                                </span>
                            </el-dialog>

                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <div class="page-box">
                    <el-pagination
                            class="pagination"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage"
                            :page-sizes="[1,2,3,4,5,6,7,8]"
                            :page-size="pagesize"
                            layout="sizes,prev,pager,next,jumper,total,slot"
                            :total="tableData.length">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Account",
    inject: ['reload'],//注入
    //生命周期获取树形结构的全查与表格的全查
    created(){
        //调用树形的方法
        this.handleNodeClick();
        //调用数据表格的方法
        this.getAll();
        //调用商品审核的详情的方法
        this.getShenHe();
    },
    data: function () {
        return {
            //商品审核
            gridData: [],
            //审核详情是否一打开页面弹窗
            dialogTableVisible:false,
            //弹窗的宽度
            formLabelWidth: '100px',
            //高级检索中的label的样式 ----- 高级检索
            labelPosition: "top",
            //高级检索是否一打开页面弹窗
            dialogFormVisible: false,
            //点击高级检索进去之后在点击开始检索的时候退出来
            btn_show: false,
            //高级检索中的数据（注意数据不要加空格，如果加了空格之后placeholder属性会显示不出来）
            dialogQuery: {
                categroyId: "",//商品分类（1、书籍2、服装）
                productName: "",//商品名称
                productSate: "",//商品状态（1、上架2、下架）
                currentpriceProduct: "",//商品价格
                productCstatus:"",//审核状态（3、未审核4、审核中5、审核失败6、其他）
                productDescription: "",//商品标签（商品描述）
                productId: "",//商品自增ID
                productCode: "",//商品编号ID
                hits: "",//商品销量（商品的点击量）
                searchKeywords: "",//商品介绍（搜索商品的关键字）
            },
            //查看按钮是否一打开页面弹窗 ----- 查看
            dialogFormVisible01: false,
            //查看、编辑按钮中的label样式
            labelPosition01: "left",
            //编辑按钮是否一打开页面弹窗 ------ 编辑
            dialogFormVisible02: false,
            //点击编辑进去之后在点击确定的时候退出来
            btn_show01: false,
            //删除按钮是否一打开页面弹窗 ------ 删除
            dialogFormVisible03: false,
            //树形组件的数组（商品） ------- 树形结构
            treeData: [],
            //获取树形结构的子节点
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            //表格中的数组（商品） ------ 表格
            tableData: [],
            //分页数据 ------ 分页
            currentPage: 1,//当前页数
            currentIndex: ' ',
            pagesize: 5,//每页显示条目个数
            //复选框（商品） ------- 复选框
            multipleSelection: [],
        }
    },
    methods:{
        //审核详情按钮 ---- 弹窗
        audit(){
            this.dialogTableVisible = true;
        },
        //商品审核的表
        getShenHe(){
            this.$http.get("/JsCourseRecord/getAll").then(res =>{
                console.log(res)
                this.gridData = res.data.data;
            },err =>{
                alert("商品审核数据请求失败！！！");
            })
        },
        //当点击高级检索的时候弹窗,开始检索的时候出来数据退出来
        dialogSelectQuery(){
            this.dialogFormVisible = true
            this.btn_show = true
        },
        //调用高级检索数据的方法
        handleQuery(){
            this.dialogFormVisible = false
            this.queryData();
        },
        //高级检索数据的方法
        queryData(){
            this.$http.get("/jsproduct/getGaoJiSelect",{
                params:{
                    "categroyId":this.dialogQuery.categroyId,
                    "productName":this.dialogQuery.productName,
                    "productSate":this.dialogQuery.productSate,
                    "currentpriceProduct":this.dialogQuery.currentpriceProduct,
                    "productCstatus":this.dialogQuery.productCstatus,
                    "productDescription":this.dialogQuery.productDescription,
                }
            }).then(res =>{
                this.tableData = res.data;
            }).catch(err =>{
                alert("高级检索请求数据失败！！！");
            })
        },
        //模糊查询（调用模糊查询数据的方法）
        onSubmit(){
            this.likeData();
        },
        //模糊查询数据的方法（连接后端）
        likeData(){
            this.$http.get("/jsproduct/getDimSelect",{
                params:{
                    "productName":this.dialogQuery.productName,
                    "categroyId":this.dialogQuery.categroyId,
                    "productSate":this.dialogQuery.productSate,
                    "productDescription":this.dialogQuery.productDescription,
                }
            }).then(res =>{
                this.tableData = res.data;
            }).catch(err =>{
                alert("模糊查询请求数据失败！！！");
            })
        },
        //查看按钮数据的方法 --- 弹窗
        dialogSelect(item){
            this.dialogFormVisible01 = true
            this.dialogQuery = {
                productCode:item.productCode,
                productName:item.productName,
                currentpriceProduct:item.currentpriceProduct,
                productSate:item.productSate,
                categroyId:item.categroyId,
                hits:item.hits,
                productDescription:item.productDescription,
                searchKeywords:item.searchKeywords,
            }
        },
        //编辑按钮数据的方法（获取表单的数据） --- 弹窗
        handleEdit(index, row){
            this.dialogFormVisible02 = true
            this.btn_show01 = true
            this.dialogQuery = {
                productId:row.productId,
                productCode:row.productCode,
                productName:row.productName,
                currentpriceProduct:row.currentpriceProduct,
                productSate:row.productSate,
                categroyId:row.categroyId,
                hits:row.hits,
                productDescription:row.productDescription,
                searchKeywords:row.searchKeywords
            }
        },
        //编辑按钮 --- 弹窗里面的确定按钮中的数据（连接后端）
        handleUpdate(){
            this.$http.get("/jsproduct/getUpdate",{
                params:{
                    "productId":this.dialogQuery.productId,
                    "productCode":this.dialogQuery.productCode,
                    "productName":this.dialogQuery.productName,
                    "currentpriceProduct":this.dialogQuery.currentpriceProduct,
                    "productSate":this.dialogQuery.productSate,
                    "categroyId":this.dialogQuery.categroyId,
                    "hits":this.dialogQuery.hits,
                    "productDescription":this.dialogQuery.productDescription,
                    "searchKeywords":this.dialogQuery.searchKeywords,
                }
            }).then(res =>{
                alert("修改成功");
            }).catch(err => {
                alert("编辑数据请求失败！！！");
            })
            this.dialogFormVisible02 = false
            this.reload();//局部刷新
        },
        //删除按钮 --- 弹窗
        handleDelete (index,row){
            this.forms.productId = row.productId;
            this.dialogFormVisible03 = true;
        },
        //删除按钮里面的弹窗确定按钮
        deleteRow(){
            this.$http.post("/jsproduct/getDelete",this.forms).then(res =>{
                if (res.data.status === 200){
                    this.$message.success("删除成功");
                }
                this.reload();
            }).catch(err =>{
                this.$message.error("删除失败")
            })
            this.dialogFormVisible03 = false;
        },
        //tree数据
        handleNodeClick(data){
            this.$http.get(`/shangpin/getAll`).then(res =>{
                console.log(res)
                this.treeData = res.data;
            },err =>{
                alert("树形结构请求失败！！！");
            })
        },
        //刷新按钮
        shua(){
            this.reload();//局部刷新
        },
        //表格的全查
        getAll(){
            this.$http.get(`/jsproduct/getAll`).then(res =>{
                console.log(res)
                this.tableData = res.data.data;
            },err =>{
                alert("table数据请求失败！！！");
            })
        },
        //分页条数
        handleSizeChange(val){
            this.pagesize = val;
            console.log(`每页 ${val} 条`);
        },
        //分页的页数
        handleCurrentChange(val){
            this.currentPage = val
        },
        //复选框中的方法
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //状态(1、上架2、下架)
        changeStatus(row){
            if (row.productSate == 1){
                return "已上架";
            } else if (row.productSate == 2){
                return "已下架"
            }
        },
        //商品分类（1、书籍2、服装）
        fenlei(row,index){
            if (row.categroyId == 1){
                return "书籍";
            } else if (row.categroyId == 2) {
                return "服装";
            }
        },
        //商品+课程表中的审核
        shen(row){
            if (row.result == 1){
                return "审核通过";
            }else if (row.result == 2){
                return "审核未通过";
            }
        },
        //审核状态(3、未审核4、审核中5、审核失败6、其他)
        shenhe(row){
        },
    },
    //审核状态的过滤器
    filters:{
        shenhe(row){
            if (row == 3){
                return "未审核";
            }else if (row == 4){
                return "审核中";
            } else if (row == 5){
                return "审核失败";
            } else if (row == 6){
                return "其他";
            }
        },
    }
}

</script>

<style lang="less" scoped>
    /*初始化样式*/
    *{
        padding: 0;
        margin: 0;
        font-size: 13px;
    }
    /*最外边的盒子给它的宽度为1520px*/
    .center-box{
        width: 1470px;
    }
    /*我给下面几行包起来了，需要一个高度，要不然下面的模糊查询的高度，会随着它一起动*/
    .center-middle{
        height: 115px;
    }
    /*商品列表需要左浮动*/
    .shang-top-one{
        float: left;
        color: #99A4BF;
    }
    /*商品列表需要一个绿色的边框*/
    .shang-top-one span{
        border-left: 5px solid #1ABC9C;
    }
    /*刷新等一些按钮需要右浮动*/
    .shang-top-two{
        float: right;
        padding-right: 80px;
    }
    /*商品列表及高级筛选的样式*/
    .shang-top,.shang-middle{
        margin-bottom: 15px;
        width: 100%;
        background: #F3F3F3;
        height: 50px;
        line-height: 50px;
        float: right;
    }
    /*筛选查询的左浮动*/
    .shang-middle-left{
        float: left;
        padding-left: 10px;
        color: #666;
    }
    /*高级检索的右浮动*/
    .shang-middle-right{
        float: right;
        padding-right: 80px;
    }
    /*模糊查询的边框*/
    .center-dim{
        text-align: center;
        width: 1468px;
        background: #FDFDFE;
        border: 1px solid #E4E4E4;
        height: 68px;
        line-height: 35px;
        margin-bottom: 15px;
    }
    /*tree结构的样式*/
    .center-tree-one{
        float: left;
        background-color: #F2F2F2;
        width: 240px;
        height: 50px;
        line-height: 50px;
        padding-left: 15px;
    }
    /*数据列表整体向右浮动*/
    .center-table-one{
        width: 1200px;
        float: right;
        background: #F3F3F3;
        height: 50px;
    }
    /*数据列表需要向左浮动*/
    .center-table-one span{
        float: left;
        color: #666;
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
    }
    /*添加商品需要向右浮动*/
    .center-table-one div{
        float: right;
        padding-right: 25px;
    }
    /*表格整体向右浮动*/
    .center-table-two{
        float: right;
        width: 1200px;
    }
    /*分页边框的样式*/
    .pagination{
        padding-top: 10px;
        padding-right: 20px;
        text-align: right;
        background: #FDFDFE;
        width: 1173px;
        height: 40px;
        border: 1px solid #E4E4E4;
    }
    /*改变按钮的样式*/
    .edit_btn{
        margin-top: 8px;
        height: 35px;
        line-height: 10px;
        width: 90px;
    }
    //查、改、删、日志按钮的颜色
    .btn{
        color: #1ABC9C;
    }
    //弹窗的取消按钮样式
    .footer_qx{
        background: #fff;
        border-color: #1ABC9C;
        color: #1ABC9C;
    }
    //弹窗的确定按钮样式
    .footer_qd{
        background: #1ABC9C;
    }
</style>
<style lang="less">
    /*对话框的样式*/
    .dialog-footer{
        border-top: 1px solid #E4E4E4;
        margin-top: -25px;
        padding-top: 15px;
        padding-right: 10px;
    }
    /*对话框按钮的边距*/
    .dialog-footer el-button{
        margin-left: 20px;
    }
    /*对话框标题的样式*/
    .upload-dialog .el-dialog__header{
        border-bottom: 1px solid #E4E4E4;
        background: #F2F2F2;
        font-weight: 700;
    }
    // 覆盖层元素增加可穿透点击事件
    .el-dialog__wrapper{
        pointer-events:none;
    }
    // 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
    .el-dialog{
        pointer-events:auto;
    }
</style>
